<template>
   <view>
  <uni-list>
  		<!-- title、note设置标题和小文字 -->
  		<uni-list-item direction="row" v-for="item in list" :key="item.id" :title="item.noticeTitle" :note="item.remark + ' '+item.createTime" @click="navigateTo(item)" link>
  			<!-- 通过v-slot:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
  			<template v-slot:header>
  				<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
				

					<!-- <image  class="image-1" :src="item.img?item.img:'https://pic3.zhimg.com/80/v2-501728f5ef557af20078fe58b6ae8fad_720w.webp?source=1940ef5c'" mode="aspectFill"></image> -->
					<image v-if="item.img"  class="image-1" :src="item.img" mode="aspectFill"></image>
					<image v-else  class="image-1" :src="'https://pic3.zhimg.com/80/v2-501728f5ef557af20078fe58b6ae8fad_720w.webp?source=1940ef5c'" mode="aspectFill"></image>
					
					
				
  				
  			</template>
  		</uni-list-item>
		<FloatButton type="primary" icon="plus" @click="navigateTo"></FloatButton>
  </uni-list>
      
</view>	  
</template>

<script>
import * as NoticeApi from '@/api/work/notice'
import Navbar from '@/components/navbar/Navbar'
import FloatButton from '@/components/button/FloatButton'
import Tabs from '@/components/tabs/Tabs'
import Record from './record'

export default {
  components: {
    Navbar,
    FloatButton,
    Tabs,
    Record,
  },
  data () {
    return {
      activeKey: 'draft',
      tabs: [{
        name: '草稿',
        key: 'draft',
      }],
      params: {
        pageNum: 0,
        pageSize: 10
      },
      list: []
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    // 加载通知公告数据
    loadData () {
      const app = this
      this.params.pageNum += 1;
      NoticeApi.postList().then(res => {
        app.list = res.list;
      })
    },
    // 滚动分页加载数据
    scrolltolower () {
      this.loadData();
    },
    tabChange (tab) {
      this.activeKey = tab.key;
      this.params.pageNum = 0;
      this.loadData();
    },
    navigateTo (notice) {
      if (notice) {
        uni.navigateTo({ url: '/pages/work/notice/detail?id=' + notice.noticeId })
      } else {
        uni.navigateTo({ url: '/pages/work/notice/edit' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  padding: 20rpx 0;
  border-bottom: 0.5px solid #ccc;
}
.title{
	font-size: 18px;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

.image-1 {
		flex-shrink: 0;
		margin-right: 10px;
		width: 125px;
		height: 125px;
		border-radius: 6px;
		overflow: hidden;
		border: 1px #f5f5f5 solid;
	}
</style>